<template>
  <div class="task-detail">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item">教学任务</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item current">{{ taskData.title || '任务详情' }}</span>
    </div>

    <!-- 标题区域 -->
    <div class="detail-header">
      <div class="header-left">
        <h1 class="detail-title">{{ taskData.title || '教学任务详情' }}</h1>
        <div class="status-badge" :class="getStatusClass(taskData.status)">
          {{ getStatusText(taskData.status) || '待批改' }}
        </div>
      </div>
      <div class="header-actions">
        <el-button type="primary" plain :icon="Edit">编辑</el-button>
        <el-button type="primary" plain :icon="DocumentCopy">复制</el-button>
        <el-button type="danger" plain :icon="Delete">删除</el-button>
      </div>
    </div>

    <!-- 基本详情区域 -->
    <div class="detail-section">
      <h2 class="section-title">基本详情</h2>
      <div class="detail-content">
        <div class="detail-info">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">任务名称</span>
              <span class="info-value">{{ taskData.title }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">学科类型</span>
              <span class="info-value">{{ taskData.subject }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">任务时间</span>
              <span class="info-value">{{ taskData.startTime }} 至 {{ taskData.endTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">创建时间</span>
              <span class="info-value">{{ taskData.createTime }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item full-width">
              <span class="info-label">任务描述</span>
              <span class="info-value">{{ taskData.description }}</span>
            </div>
          </div>
        </div>

        <!-- 图片资源展示 -->
        <div class="task-images">
          <h3 class="images-title">上传试卷：</h3>
          <div class="images-list">
            <div v-for="(image, index) in taskData.images" :key="index" class="image-file-item">
              <!-- 图片预览区域 -->
              <div class="image-preview-container">
                <div class="file-thumbnail" :class="getFileStatusClass(image.status || 'completed')">
                  <img v-if="image.thumbnail" :src="image.thumbnail" :alt="`试卷图片${index + 1}`" class="thumbnail-img" />
                  <div v-else class="file-placeholder">📄</div>
                </div>
              </div>

              <!-- 图片信息区域 -->
              <div class="image-info-container">
                <div class="image-title">{{ image.fileName || `试卷图片${index + 1}` }}</div>
                <div class="image-size">{{ image.fileSize || '32.2KB' }}</div>

                <!-- 悬停时显示的描述信息 -->
                <div class="image-description-tooltip">
                  {{ image.description || '暂无描述' }}
                </div>

                <!-- 上传进度 -->
                <div v-if="image.status === 'uploading'" class="upload-progress">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: (image.progress || 0) + '%' }"></div>
                  </div>
                </div>

                <!-- 操作按钮 -->
                <div v-if="(image.status || 'completed') === 'completed'" class="image-actions">
                  <button class="preview-btn" @click="previewImage(index)">
                    <span class="preview-icon">👁</span>
                    点击可查看预览
                  </button>
                  <button class="delete-btn" @click="deleteImage(index)">✕</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 智能错题集 -->
    <div class="detail-section">
      <div class="section-header">
        <div class="sectionTop-left">
          <div class="smart-error-title">
            <div class="title-icon">✨</div>
            <h2 class="section-title">智能错题集</h2>
            <div class="error-rate-badge">
              错误率：<span class="error-percentage">{{ taskData.errorRate || '65.7%' }}</span>
            </div>
          </div>
        </div>
        <div class="sectionTop-right">
          <p>每天12:00更新</p>
        </div>
      </div>
      <div class="error-collection">
        <h2>题目</h2>
        <p>这里是一个题目这里是一个题日这里是一个题目这里是一个题目这里是一个题目这里是一个题目这里是一个题目这里是一个题日这里是一个题目这里是一个题日这里是一个题目这里是
          一个题目</p>
      </div>
    </div>

    <!-- 批改学生信息卡片 -->
    <div class="detail-section">
      <h2 class="section-title">批改学生信息</h2>
      <div class="students-grid">
        <div v-for="(student, index) in taskData.students" :key="index" class="student-card">
          <div class="student-header">
            <div class="student-name">{{ student.name }}</div>
            <div class="student-status" :class="getStudentStatusClass(student.status)">
              <span class="status-dot"></span>
              {{ student.status }}
            </div>
          </div>

          <div class="student-score-section">
            <div class="score-label">总得分：</div>
            <div class="score-value">{{ student.score || '-' }}</div>
          </div>

          <div class="student-work-area">
            <!-- 待批改状态：显示上传区域 -->
            <div v-if="student.status === '待批改'" class="upload-area" @click="uploadStudentImage(student)">
              <div class="upload-icon">📄</div>
              <div class="upload-text">点击拍摄图片上传</div>
            </div>
            <!-- 其他状态：显示作业图片 -->
            <div v-else-if="student.image" class="work-image-container">
              <img :src="student.image" :alt="student.name" class="work-image" />
            </div>
            <!-- 其他状态但无图片：显示占位符 -->
            <div v-else class="work-placeholder">
              <div class="placeholder-icon">📄</div>
              <div class="placeholder-text">暂无作业图片</div>
            </div>
          </div>

          <div class="student-actions">
            <!-- 已完成状态：批改详情、错题集可用，订正作业不可用 -->
            <template v-if="student.status === '已完成'">
              <el-button type="primary" link size="small" @click="viewDetails(student)">
                批改详情
              </el-button>
              <el-button type="primary" link size="small" @click="viewErrors(student)">
                错题集
              </el-button>
              <el-button type="info" link size="small" disabled>
                订正作业
              </el-button>
            </template>

            <!-- 待订正状态：三个按钮都可用 -->
            <template v-else-if="student.status === '待订正'">
              <el-button type="primary" link size="small" @click="viewDetails(student)">
                批改详情
              </el-button>
              <el-button type="primary" link size="small" @click="viewErrors(student)">
                错题集
              </el-button>
              <el-button type="primary" link size="small" @click="correctWork(student)">
                订正作业
              </el-button>
            </template>

            <!-- 批改中状态：三个按钮都不可用 -->
            <template v-else-if="student.status === '批改中'">
              <el-button type="info" link size="small" disabled>
                批改详情
              </el-button>
              <el-button type="info" link size="small" disabled>
                错题集
              </el-button>
              <el-button type="info" link size="small" disabled>
                订正作业
              </el-button>
            </template>

            <!-- 待批改状态：无按钮，只显示上传区域 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElButton } from 'element-plus'
import { Edit, DocumentCopy, Delete } from '@element-plus/icons-vue'
import { photosStorage, type PhotoData } from '@/utils/photosDB'

// 定义接口
interface TaskImage {
  id: string
  thumbnail: string
  fullImage: string
  fileName?: string
  fileSize?: string
  description?: string
  status?: 'uploading' | 'completed' | 'error'
  progress?: number
}

interface Student {
  id: string
  name: string
  status: string
  score?: number
  image?: string
}

interface ErrorItem {
  id: string
  title: string
  errorCount: number
  question: string
  analysis: string
}

interface TaskData {
  id: string
  title: string
  description: string
  subject: string
  status: string
  startTime: string
  endTime: string
  createTime: string
  images: TaskImage[]
  errorRate: string
  errorCollection: ErrorItem[]
  students: Student[]
}

const route = useRoute()
const router = useRouter()
const taskId = ref(route.params.id as string || '')

// 学生照片数据
const studentPhotos = ref<Record<string, PhotoData[]>>({})

// 模拟任务详情数据
const taskData = ref<TaskData>({
  id: '1',
  title: '数学期中测试',
  description: '二年级数学期中测试，包含口算、应用题和几何题',
  subject: '数学',
  status: '待批改',
  startTime: '2023-04-23',
  endTime: '2023-05-23',
  createTime: '2023-04-20 14:30',
  images: [
    {
      id: 'img1',
      thumbnail: 'https://via.placeholder.com/80x100?text=Page1',
      fullImage: 'https://via.placeholder.com/800x1000?text=Page1',
      fileName: '202412201aa.jpg',
      fileSize: '32.2KB',
      description: '数学期中测试第一页 - 选择题部分',
      status: 'completed'
    },
    {
      id: 'img2',
      thumbnail: 'https://via.placeholder.com/80x100?text=Page2',
      fullImage: 'https://via.placeholder.com/800x1000?text=Page2',
      fileName: '202412202aa.jpg',
      fileSize: '28.5KB',
      description: '数学期中测试第二页 - 应用题部分',
      status: 'completed'
    },
    {
      id: 'img3',
      thumbnail: 'https://via.placeholder.com/80x100?text=Page3',
      fullImage: 'https://via.placeholder.com/800x1000?text=Page3',
      fileName: '202412203aa.jpg',
      fileSize: '35.1KB',
      status: 'completed'
    }
  ],
  errorRate: '35%',
  errorCollection: [
    {
      id: 'err1',
      title: '应用题错误',
      errorCount: 15,
      question: '小明有12个苹果，他送给小红3个，又送给小刚2个，小明还剩几个苹果？',
      analysis: '大部分学生计算错误，没有正确理解题意或者计算步骤有误。'
    },
    {
      id: 'err2',
      title: '几何题错误',
      errorCount: 8,
      question: '一个正方形的周长是20厘米，它的面积是多少平方厘米？',
      analysis: '学生对周长和面积的概念混淆，没有正确计算边长。'
    }
  ],
  students: [
    {
      id: 'stu1',
      name: '张三',
      status: '已完成',
      score: 85,
      image: 'https://via.placeholder.com/120x120?text=张三作业'
    },
    {
      id: 'stu2',
      name: '李四',
      status: '待订正',
      score: 65,
      image: 'https://via.placeholder.com/120x120?text=李四作业'
    },
    {
      id: 'stu3',
      name: '王五',
      status: '批改中',
      image: 'https://via.placeholder.com/120x120?text=王五作业'
    },
    {
      id: 'stu4',
      name: '赵六',
      status: '待批改'
    },
    {
      id: 'stu5',
      name: '钱七',
      status: '已完成',
      score: 92,
      image: 'https://via.placeholder.com/120x120?text=钱七作业'
    },
    {
      id: 'stu6',
      name: '孙八',
      status: '待批改'
    },
    {
      id: 'stu7',
      name: '周九',
      status: '批改中',
      image: 'https://via.placeholder.com/120x120?text=周九作业'
    },
    {
      id: 'stu8',
      name: '吴十',
      status: '待订正',
      score: 78,
      image: 'https://via.placeholder.com/120x120?text=吴十作业'
    }
  ]
})

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    'pending': 'status-pending',
    'grading': 'status-grading',
    'correction': 'status-correction',
    'correcting': 'status-correcting',
    'completed': 'status-completed',
    '待批改': 'status-pending',
    '批改中': 'status-grading',
    '待订正': 'status-correction',
    '订正中': 'status-correcting',
    '已完成': 'status-completed'
  }
  return statusMap[status] || 'status-pending'
}

// 获取状态显示文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'pending': '待批改',
    'grading': '批改中',
    'correction': '待订正',
    'correcting': '订正中',
    'completed': '已完成'
  }
  return textMap[status] || status
}

// 获取学生状态样式类
const getStudentStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    '待批改': 'student-pending',
    '批改中': 'student-grading',
    '待订正': 'student-correction',
    '已完成': 'student-completed'
  }
  return statusMap[status] || 'student-pending'
}

// 加载任务图片资源（创建教学任务时的试卷图片，isCreate=true）
const loadTaskImages = async () => {
  try {
    // 导入photos数据库
    const { photosStorage } = await import('@/utils/photosDB')
    await photosStorage.init()

    // 获取当前任务的试卷图片（isCreate=true）
    const photos = await photosStorage.getTaskPhotos(taskId.value)
    if (photos && photos.length > 0) {
      // 将照片数据转换为TaskImage格式并添加到任务图片列表
      const taskImages: TaskImage[] = photos.map((photo, index) => ({
        id: photo.id,
        thumbnail: photo.thumbnail,
        fullImage: photo.fullImage,
        fileName: photo.fileName || `试卷图片${index + 1}.jpg`,
        fileSize: photo.fileSize || '32.2KB',
        description: photo.description || '教学任务试卷图片',
        status: 'completed' as const
      }))

      // 替换现有的模拟图片数据
      taskData.value.images = taskImages
      console.log('任务图片已加载:', taskImages.length, '张')
    }
  } catch (error) {
    console.error('Failed to load task images:', error)
  }
}

// 加载学生照片（学生作业图片，isCreate=false）
const loadStudentPhotos = async (studentId: string) => {
  try {
    // 先尝试从photos数据库加载
    const { photosStorage } = await import('@/utils/photosDB')
    await photosStorage.init()

    // 获取指定学生的作业图片（isCreate=false）
    const photos = await photosStorage.getStudentPhotos(taskId.value, studentId)

    // 同时尝试从studentPhotos数据库加载
    const { studentPhotosStorage } = await import('@/utils/studentPhotosDB')
    await studentPhotosStorage.init()

    const studentPhotosFromDB = await studentPhotosStorage.getStudentPhotosByTask(taskId.value, studentId)

    // 合并两个数据源的照片
    const allPhotos = [...photos, ...studentPhotosFromDB.map(sp => ({
      id: sp.id,
      taskId: sp.taskId,
      studentId: sp.studentId,
      isCreate: false,
      thumbnail: sp.thumbnail,
      fullImage: sp.fullImage,
      timestamp: sp.timestamp,
      teacherID: sp.teacherID,
      fileName: sp.fileName,
      fileSize: sp.fileSize,
      description: sp.description
    }))]

    if (allPhotos && allPhotos.length > 0) {
      // 存储学生照片数据
      studentPhotos.value[studentId] = allPhotos

      // 更新学生卡片中的图片显示（使用第一张图片的缩略图）
      const student = taskData.value.students.find(s => s.id === studentId)
      if (student && allPhotos[0]?.thumbnail) {
        student.image = allPhotos[0].thumbnail
        // 更新学生状态为"待订正"
        if (student.status === '待批改') {
          student.status = '待订正'
        }
      }

      console.log(`学生${studentId}的作业图片已加载:`, allPhotos.length, '张')
    }
  } catch (error) {
    console.error('Failed to load student photos:', error)
  }
}

// 上传学生图片
const uploadStudentImage = (student: Student) => {
  ElMessage.info(`为${student.name}上传作业图片`)

  // 跳转到拍照页面，传递学生信息
  router.push({
    name: 'camera-capture',
    query: {
      context: 'task-detail-edit',
      taskId: taskId.value,
      studentId: student.id,
      studentName: student.name,
      returnTo: 'task-detail'
    }
  })
}

// 查看批改详情
const viewDetails = (student: Student) => {
  ElMessage.info(`查看${student.name}的批改详情`)
  // 跳转到批改详情页面
  router.push({
    name: 'homework-submission-detail',
    params: {
      taskId: taskId.value
    },
    query: {
      studentId: student.id,
      studentName: student.name,
      taskName: taskData.value.title,
      context: 'grading-details'
    }
  })
}

// 查看错题集
const viewErrors = (student: Student) => {
  ElMessage.info(`查看${student.name}的错题集`)
  // 跳转到错题集页面
  router.push({
    name: 'wrong-question-collection',
    params: {
      collectionId: `${taskId.value}-${student.id}`
    },
    query: {
      studentId: student.id,
      studentName: student.name,
      taskId: taskId.value,
      taskName: taskData.value.title,
      context: 'error-collection'
    }
  })
}

// 订正作业
const correctWork = (student: Student) => {
  ElMessage.info(`${student.name}开始订正作业`)
  // 跳转到拍摄页面进行订正作业
  router.push({
    name: 'camera-capture',
    query: {
      context: 'correction-work',
      taskId: taskId.value,
      studentId: student.id,
      studentName: student.name,
      returnTo: 'task-detail'
    }
  })
}

// 获取文件状态样式类
const getFileStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    'uploading': 'file-uploading',
    'completed': 'file-completed',
    'error': 'file-error'
  }
  return statusMap[status] || 'file-completed'
}

// 预览图片
const previewImage = (index: number) => {
  ElMessage.info(`预览第${index + 1}张图片`)
  // 这里可以实现图片预览功能
}

// 删除图片
const deleteImage = (index: number) => {
  ElMessage.info(`删除第${index + 1}张图片`)
  // 这里可以实现图片删除功能
}

// 从数据库加载任务详情
const loadTaskDetail = async () => {
  try {
    const { taskListStorage } = await import('@/utils/taskListDB')
    await taskListStorage.init()

    const task = await taskListStorage.getTaskById(taskId.value)
    if (task) {
      // 更新任务基本信息
      taskData.value.id = task.id
      taskData.value.title = task.title
      taskData.value.description = task.description
      taskData.value.subject = task.subject
      taskData.value.status = task.status
      taskData.value.startTime = task.startTime
      taskData.value.endTime = task.endTime
      taskData.value.createTime = task.createdAt

      console.log('任务详情已从数据库加载:', task)
    } else {
      console.log('数据库中未找到任务，使用模拟数据')
    }
  } catch (error) {
    console.error('加载任务详情失败:', error)
    // 不显示错误消息，继续使用模拟数据
    console.log('使用模拟数据继续显示任务详情')
  }
}

onMounted(async () => {
  console.log('任务详情页加载，任务ID:', taskId.value)

  // 首先加载任务基本信息
  await loadTaskDetail()

  // 初始加载任务图片资源
  await loadTaskImages()

  // Check if we're coming from PhotoPreview or CameraCapture
  if (route.query.fromPhotoPreview === 'true' || route.query.fromCameraCapture === 'true') {
    // Update task name if provided
    if (route.query.taskName) {
      taskData.value.title = route.query.taskName as string
    }

    // 情况1：创建教学任务 - 将照片渲染到图片资源展示部分
    if (route.query.hasPhotos === 'true') {
      await loadTaskImages()
    }

    // 情况2：学生作业上传 - 将照片渲染到对应学生的image中
    if (route.query.photoUpdated === 'true' && route.query.studentId) {
      const studentId = route.query.studentId as string
      await loadStudentPhotos(studentId)
      // 显示成功消息
      ElMessage.success('学生作业照片已成功上传')
    }
  }

  // 为所有学生加载已有的照片
  for (const student of taskData.value.students) {
    await loadStudentPhotos(student.id)
  }
})
</script>

<style scoped>
.task-detail {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100%;
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  color: #666;
}

.breadcrumb-item.current {
  color: #303133;
  font-weight: 500;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #c0c4cc;
}

/* 标题区域 */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.detail-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.status-pending {
  background: #e6f7ff;
  color: #1890ff;
}

.status-grading {
  background: #fff7e6;
  color: #fa8c16;
}

.status-correction {
  background: #f6ffed;
  color: #52c41a;
}

.status-correcting {
  background: #fff2e8;
  color: #fa541c;
}

.status-completed {
  background: #f0f5ff;
  color: #2f54eb;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 详情区域 */
.detail-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sectionTop-left {
  display: flex;
  flex-direction: row;
}

.sectionTop-right {
  font-size: 13px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 16px 0;
}

.detail-content {
  display: flex;
  gap: 24px;
}

.detail-info {
  flex: 1;
}

.info-row {
  display: flex;
  margin-bottom: 16px;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-item.full-width {
  flex: 2;
}

.info-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.info-value {
  font-size: 14px;
  color: #303133;
}

/* 图片资源展示 */
.task-images {
  width: 300px;
}

.images-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 16px 0;
}

.images-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-file-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s;
  position: relative;
}

.image-file-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.image-file-item:hover .image-description-tooltip {
  opacity: 1;
  visibility: visible;
}

/* 图片预览容器 */
.image-preview-container {
  flex-shrink: 0;
}

.file-thumbnail {
  width: 60px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-completed {
  background: #f0f2f5;
  border: 1px solid #d9d9d9;
}

.file-uploading {
  background: #e6f7ff;
  border: 1px solid #409eff;
}

.file-error {
  background: #fef0f0;
  border: 1px solid #f56c6c;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-placeholder {
  font-size: 24px;
  color: #909399;
}

/* 图片信息容器 */
.image-info-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.image-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.image-size {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

/* 悬停描述提示 */
.image-description-tooltip {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 10;
  transform: translateY(-100%);
}

.image-description-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.upload-progress {
  margin-top: 6px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #f0f2f5;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #409eff;
  transition: width 0.3s;
}

.image-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.preview-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s;
}

.preview-btn:hover {
  background: #333;
}

.preview-icon {
  font-size: 10px;
}

.delete-btn {
  width: 16px;
  height: 16px;
  background: #909399;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.delete-btn:hover {
  background: #f56c6c;
}

/* 智能错题集 */
.smart-error-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 24px;
}

.error-rate-badge {
  background: #fff1de;
  border: 1px solid #ffe4be;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  color: #e6a23c;
  font-weight: 500;
}

.error-percentage {
  color: #e6a23c;
  font-weight: 600;
}

.error-collection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.error-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 16px;
}

.error-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.error-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.error-count {
  font-size: 14px;
  color: #e6a23c;
}

.error-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-question {
  font-size: 14px;
  color: #303133;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.error-analysis {
  display: flex;
  gap: 8px;
}

.analysis-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.analysis-content {
  font-size: 14px;
  color: #606266;
}

/* 批改学生信息 */
.students-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.student-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(45deg, #ffffff, #f0f6ff);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.student-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.student-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.student-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 15px;
  font-weight: 500;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.student-pending {
  background: #ecf1f7;
  color: #b1b5b9;
}

.student-pending .status-dot {
  background: #b1b5b9;
}

.student-grading {
  background: #e6f4ff;
  color: #1e7cff;
}

.student-grading .status-dot {
  background: #1e7cff;
}

.student-completed {
  background: #e0f2e7;
  color: #40b009;
}

.student-completed .status-dot {
  background: #40b009;
}

.student-correction {
  background: #e6f4ff;
  color: #1677ff;
}

.student-correction .status-dot {
  background: #167fff;
}


.student-grading {
  background: #e6f4ff;
  color: #1677ff;
}



.student-score-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.score-label {
  font-size: 14px;
  color: #8b8c8b;
}

.score-value {
  font-size: 14px;
  font-weight: 600;
  color: #bfc1c2;
}

.student-work-area {
  flex: 1;
  min-height: 120px;
  margin-bottom: 12px;
}

.work-image-container {
  width: 100%;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-area {
  width: 100%;
  height: 120px;
  border: 2px dashed #d9d9d9;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fafafa;
}

.upload-area:hover {
  border-color: #409EFF;
  background: #f0f9ff;
}

.upload-icon {
  font-size: 24px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 12px;
  color: #909399;
  text-align: center;
  line-height: 1.4;
}

.work-placeholder {
  width: 100%;
  height: 120px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}

.placeholder-icon {
  font-size: 24px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.placeholder-text {
  font-size: 12px;
  color: #909399;
  text-align: center;
  line-height: 1.4;
}

.student-actions {
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .detail-content {
    flex-direction: column;
  }

  .task-images {
    width: 100%;
  }

  .images-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .students-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .images-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .students-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .images-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .students-grid {
    grid-template-columns: 1fr;
  }
}
</style>